<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				padding: 0px;
				margin: 0px;
				list-style: none;
				box-sizing: border-box;
			}
			
			.goods-box {
				width: 1200px;
				margin: auto;
				background-color: yellow;
				overflow: hidden;
				/* display: flow-root; */
			}
			
			/* .goods-box::after {
				content: "";
				clear: both;
				display: block;
			} */
			
			.goods-item {
				float: left;
				width: 33%;
				padding: 5px;
			}
			
			.goods-item>div {
				background-color: #ababab;
				height: 300px;
			}
			
			.item-left {
				float: left;
				width: 150px;
				height: 150px;
			}
			
			.item-right {
				float: left;
				padding: 5px;
			}
		</style>
	</head>
	<body>
		<main>
			<ul class="goods-box">
				<li class="goods-item">
					<div>
						<img src="https://gw.alicdn.com/bao/uploaded/i3/2298252524/O1CN01ku76Ip1UW2PZ31wai_!!0-item_pic.jpg_300x300q90.jpg_.webp" class="item-left">
						<div class="item-right">12123123</div>
					</div>
				</li>
				<li class="goods-item">
					<div></div>
				</li>
				<li class="goods-item">
					<div></div>
				</li>
				<li class="goods-item">
					<div></div>
				</li>
				<li class="goods-item">
					<div></div>
				</li>
				<li class="goods-item">
					<div></div>
				</li>
				<li class="goods-item">
					<div></div>
				</li>
				<li class="goods-item">
					<div></div>
				</li>
				<li class="goods-item">
					<div></div>
				</li>
				<li class="goods-item">
					<div></div>
				</li>
				<li class="goods-item">
					<div></div>
				</li>
				<li class="goods-item">
					<div></div>
				</li>
			</ul>
		</main>
	</body>
</html>